<template>
  <div class="itemBodys">
    <div class="topTab">
      <tab :list="tabList" v-model:active="active"></tab>
    </div>
    <item1 title="告警数量" :list="list"></item1>
    <item1 title="告警设备" :list="list2"></item1>
  </div>
</template>

<script>
import item1 from './item1/index.vue'
import tab from '@/components/tab/tab.vue'
import {AlarmInformationDevice, warnings} from "@/api/api/LargeScreenData.js";

export default {
  name: "item4",
  data() {
    return {
      active: 0,
      tabList: [{
        title: '当日',
        id: 0
      }, {
        title: '本周',
        id: 1
      }, {
        title: '本月',
        id: 2
      }, {
        title: '本年',
        id: 3,
      }],
      list: [
        {
          name: '一般告警',
          value: 489,
          color1: 'rgba(253, 168, 62, 1)',
          color2: 'rgba(254, 217, 82, 1)',
          checked: true
        },
        {
          name: '严重告警',
          value: 489,
          color1: 'rgba(8, 170, 135, 1)',
          color2: 'rgba(14, 224, 159, 1)',
          checked: true
        },
        {
          name: '紧急告警',
          value: 789,
          color1: 'rgba(15, 234, 234, 1)',
          color2: 'rgba(11, 155, 159, 1)',
          checked: true
        }],
      list2: [
        {
          name: '温湿度',
          value: 456,
          color1: 'rgba(234, 82, 15, 1)',
          color2: 'rgba(248, 101, 20, 1)',
          checked: true
        },
        {
          name: '烟感',
          value: 452,
          color1: 'rgba(247, 18, 56, 1)',
          color2: 'rgba(248, 20, 111, 1)',
          checked: true
        }, {
          name: '红外',
          value: 723,
          color1: 'rgba(94, 18, 247, 1)',
          color2: 'rgba(154, 20, 248, 1)',
          checked: true
        }]
    }
  },
  components: {item1, tab},
  mounted() {
    this.getData()
    this.getData2()
  },
  watch: {
    active() {
      this.getData()
      this.getData2()
    },
  },
  methods: {
    async getData() {
      try {
        const res = await warnings();
        this.list = res.data
      } catch (err) {
        console.error(err);
      }
    },
    async getData2() {
      try {
        const res = await AlarmInformationDevice();
        this.list2 = res.data
      } catch (err) {
        console.error(err);
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.itemBodys {
  position: relative;
  width: calc(100% - 0px);
  margin: 0 auto;
  height: calc(100% - 0px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
}

.topTab {
  width: 100%;
  height: 30px;
  position: absolute;
  top: 0;
  z-index: 11;
}
</style>
